<template>
  <div>
    <a-layout>
      <navbar />
      <a-layout class="mg_t1  custom_admin">
        <a-layout-sider>
          <sidebar />
        </a-layout-sider>
        <a-layout-content>
          <app-main />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import ResizeMixin from "./mixin/ResizeHandler";
import Navbar from "./components/navbar/adminNew";
import Sidebar from "./components/sidebar/admin";
import AppMain from "./components/appmain/admin";

export default {
  name: "Layout",
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    device() {
      return this.$store.state.app.device;
    },
    fixed_header() {
      return this.$store.state.settings.fixed_header;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile"
      };
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    }
  }
};
</script>
<style lang="scss" scoped>
.custom_admin {
  padding: 20px 100px 0 100px;
}
</style>
